import { Layout, Tag } from "antd";
import AvatarIcon from "./components/AvatarIcon";
import CollapseIcon from "./components/CollapseIcon";
import BreadcrumbNav from "./components/BreadcrumbNav";
import Theme from "./components/Theme";
import Setting from "./components/Setting";
import Fullscreen from "./components/Fullscreen";
import { connect } from "react-redux";
import { AUTH_USERTYPE } from "@conf";
import { SettingOutlined, FileGifOutlined, ReloadOutlined } from "@ant-design/icons";
// import { openLink } from ''
const mapStateToProps = (state: any) => state.global;
export default connect(mapStateToProps)(
	({ userInfo, authLevel, mode }: { userInfo?: any; authLevel?: any; mode?: any }) => {
		const { Header } = Layout;
		const isopen = mode === "open";

		return (
			<Header
				className=' bg-white h-16 px-12 text-sm flex items-center gap-2 '
				style={{ borderBottom: "1px solid #f6f6f6" }}>
				{!isopen && <CollapseIcon />}
				<BreadcrumbNav />

				<p className=' h-full flex-1 w-0 electron-move'></p>
				<i
					onClick={() => {
						window.location.reload();
					}}
					className='icon-class'>
					<ReloadOutlined />
				</i>
				{isopen ? (
					<>
						<Setting icon={<FileGifOutlined />} href='/open/selectbg' title='背景图配置' />
						<Setting icon={<SettingOutlined />} href='/open/utils' title='快捷键配置' />
					</>
				) : (
					<Theme />
				)}

				<Fullscreen />

				<div className=' flex items-center'>
					<span className=' mr-1'>{userInfo?.name}</span>
					<Tag color='success' className=' mr-0'>
						{AUTH_USERTYPE[authLevel]}
					</Tag>
				</div>

				<AvatarIcon isopen={isopen} />
			</Header>
		);
	}
);
